<template>
    <div class="view" :style="scaleStyle">
        <Header @changeOrg="changeOrg" @changeYear="changeYear" @changeActive="changeActive" />
        <div class="view-box">
            <div class="content" v-if="active == '0'">
                <div class="left-box">
                    <OkrContent />
                    <projectSituation :project="dataObjJk" :orgId="orgId" :yearFilter="yearFilter" />
                </div>
                <div class="box">
                    <incomeStatistics :income="dataObjIncome" :orgId="orgId" :yearFilter="yearFilter" />
                    <projectControl :mgr="dataObjMgr" :orgId="orgId" :yearFilter="yearFilter" />
                </div>
                <div class="right-box">
                    <project :mgr="dataObjThree" :orgId="orgId" :yearFilter="yearFilter" />
                    <problemProject :question="dataObjQuestion" :orgId="orgId" :yearFilter="yearFilter" />
                </div>
            </div>
            <div class="cloud-box" v-if="active == '1'">
                <titleComponent title="政务外网调度"></titleComponent>
                <div class="content-text">成为省内政务外网优势供应商，通过持续运营为客户提供优质服务，持续保持主导地位，牵引行业专网拓展。</div>
                <el-button type="primary" class="btn-pdf" icon="el-icon-folder-opened"
                    @click="goPdf">场景化解决方案</el-button>
                <cloudnet />
            </div>
            <div class="dqyt-box" v-if="active == '2'">
                <titleComponent title="特色客户-大庆油田精准画像"></titleComponent>
                <div class="content-text" style="left: 255px;">
                    通过精准客户画像，深挖客户需求，匹配自有能力, 整合核心能力，强化省专协同，组建专班攻坚，为油田客户提供一体化解决方案，实现商机精准调度与高效转化。</div>
                <specialCustomers />
            </div>
            <!-- <div class="bar-box img-box" v-if="active == '3'">
                <titleComponent title="数字政府"></titleComponent>
                <digitalGovernment />  -->
            <!-- <img src="@/assets/img/szzf.png" width="1600" /> -->
            <!-- </div> -->
            <div class="bar-box" v-if="active == '0'">
                <titleComponent title="双五五指标"></titleComponent>
                <BarBaseChart :dataList="dataList" />
            </div>
            <div class="content" v-if="active == '0'">
                <BusinessScheduling />
                <TopList />
            </div>
            <div class="cloud-box" v-if="active == '4'">
                <titleComponent title="政务云调度"></titleComponent>
                <div class="content-text" style="left: 110px;">成为省内政务云标杆供应商，持续发力运营工作，筑牢核心优势，为客户提供优质的政务云服务。</div>
                <cloudBox />
            </div>
            <div class="bar-box img-box" v-if="active == '5'">
                <img src="@/assets/img/tree2.png" />
            </div>
            <div class="bar-box img-box" v-if="active == '6'">
                <img src="@/assets/img/tree3.png" />
            </div>
        </div>
    </div>
</template>
<script>
import Header from "./components/Header";
import titleComponent from "./components/titleComponent";
import projectSituation from "./components/projectSituation";
import incomeStatistics from "./components/incomeStatistics";
import OkrContent from "./components/OkrContent";
import projectControl from "./components/projectControl";
import project from "./components/Project";
import problemProject from "./components/problemProject";
import BarBaseChart from "./components/BarBaseChart";
import BusinessScheduling from "./components/BusinessScheduling";
import TopList from "./components/topList.vue";
import cloudnet from "./components/cloudnet"
import specialCustomers from "./components/specialCustomers"
import digitalGovernment from "./components/digitalGovernment"
import cloudBox from "./components/cloudBox"
import { getDoubleFive, selectByCityCode, selectIncome, selectMgr, selectQuestion, selectThree } from '@/api/api'
import { active } from "sortablejs";
export default {
    name: 'view',
    components: {
        Header,
        projectSituation,
        incomeStatistics,
        projectControl,
        project,
        problemProject,
        titleComponent,
        BarBaseChart,
        BusinessScheduling,
        TopList,
        OkrContent,
        cloudnet,
        specialCustomers,
        digitalGovernment,
        cloudBox
    },
    computed: {
        /* 屏幕缩放倍数 */
        scaleStyle() {
            return {
                transform: 'scale(' + this.screenScale.scaleX + ',' + this.screenScale.scaleY + ')',
                height: this.height == 1080 ? '1080px' : '945px'
            }
        }
    },
    mounted() {
        this.scale()
        window.addEventListener('resize', this.scale)
        this.$once('hook:beforeDestory', () => {
            window.removeEventListener('resize', this.scale)
        })
        let query = this.$route.query
        let loginCode = query.loginCode || ''
        if (loginCode) {
            this.$store.dispatch('user/saveUser', loginCode)
        }
    },
    data() {
        return {
            active: '0',
            dataObjJk: {},
            dataObjIncome: {},
            dataObjMgr: {},
            dataObjQuestion: {},
            dataObjThree: {},
            screenScale: {
                scaleX: 1,
                scaleY: 1
            },
            dataList: [],
            orgId: '10008',
            yearFilter: String(new Date().getFullYear()),
            height: 945
        }
    },
    methods: {
        goPdf() {
            window.open('./电子政务外网场景营销与激励政策指引.pdf', '场景化解决方案');
        },
        changeActive(val) {
            this.active = val
        },
        /* 界面伸缩 */
        scale() {
            var width = document.body.clientWidth
            var height = document.body.clientHeight
            this.height = document.body.clientHeight
            const scaleX = width / 1920
            const scaleY = scaleX == 1 ? 1 : height / 945
            this.screenScale = {
                scaleX,
                scaleY
            }
        },
        getFive() {
            getDoubleFive({ city_id: this.orgId, yearFilter: this.yearFilter }).then(res => {
                let list = []
                res.map(item => {
                    list.push({ name: item.cityName, value: this.truncateToFixed(item.zbAmountPer * 100, 1), attr: '移动中标金额份额' })
                    list.push({ name: item.cityName, value: this.truncateToFixed(item.zbCountPer * 100, 1), attr: '移动中标个数份额' })
                })
                this.dataList = [...list]
            })
        },
        truncateToFixed(value, decimals) {
            const integerPart = Math.trunc(value); // 获取整数部分
            const decimalPart = value - integerPart; // 获取小数部分
            const factor = Math.pow(10, decimals);
            const truncatedDecimalPart = decimalPart < 0 ? Math.ceil(decimalPart * factor) / factor : Math.floor(decimalPart * factor) / factor; // 根据正负选择向上或向下截断
            return integerPart + truncatedDecimalPart; // 组合整数部分和小数部分
        },
        getDataNum() {
            let params = this.orgId === '10008' ? { provinceCode: this.orgId, yearFilter: this.yearFilter } : { cityCode: this.orgId, yearFilter: this.yearFilter }
            selectByCityCode({ cityCode: this.orgId, yearFilter: this.yearFilter }).then(res => {
                this.dataObjJk = res || {}
            });
            selectIncome(params).then(res => {
                this.dataObjIncome = res || {}
            });
            selectMgr(params).then(res => {
                this.dataObjMgr = res || {}
            });
            selectQuestion(params).then(res => {
                this.dataObjQuestion = res || {}
            });
            let paramsThree = this.orgId === '10008' ? { provinceCode: this.orgId, yearFilter: '2025' } : { cityCode: this.orgId, yearFilter: '2025' }
            selectThree(paramsThree).then(res => {
                this.dataObjThree = res || {}
            });
        },
        changeOrg(orgId) {
            this.orgId = orgId;
            this.getDataNum();
            this.getFive();
        },
        changeYear(year) {
            this.yearFilter = year;
            this.getDataNum();
            this.getFive();
        }
    }
}
</script>

<style lang="scss" scoped>
.view {
    width: 1920px;
    transform-origin: top left;
    height: 945px;
}

.view-box {
    width: 100%;
    box-sizing: border-box;
    background: #f0f7fd;
    padding: 16px;
    height: calc(100% - 64px);
    overflow-y: auto;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.view-box::-webkit-scrollbar {
    width: 6px;
    height: 0px;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
.view-box::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
.view-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #aaa;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.right-box {
    width: 520px;
    height: 600px;
    margin-bottom: 16px;
}

.box {
    width: 816px;
    height: 600px;
    margin-bottom: 16px;
}

.bar-box {
    width: 100%;
    height: 300px;
    background: #fff;
    margin-bottom: 16px;
    box-sizing: border-box;
    padding: 16px;
}

.bar-box-max {
    min-height: 700px;
    height: auto;
    margin-bottom: 0;
    position: relative;
}

.cloud-box {
    width: 100%;
    height: 300px;
    margin-bottom: 16px;
    box-sizing: border-box;
    padding: 5px 0;
    position: relative;
}

.dqyt-box {
    position: relative;
    padding: 4px 0;
}

.btn-pdf {
    position: absolute;
    right: 0px;
    top: -4px;
}

.img-box {
    height: auto;
    text-align: center;
    margin-bottom: 0;
    padding: 0;
    height: 100%;

    img {
        width: 100%;
        height: 100%;
    }
}

.empty-box-cloud {
    width: 100%;
    height: 845px;
    background: #fff;
    text-align: center;
    color: #999;
    line-height: 30px;
    padding-top: 25vh;
}
</style>
<style>
.org-tree-node-label {
    z-index: 99;
}

.org-tree-node-label .org-tree-node-label-inner {
    background: #2196f3;
    color: #fff;
    font-weight: bold;
    padding: 0 !important;
}

/* .org-tree-node-label .org-tree-node-label-inner:hover {
    background: rgb(55, 55, 241)
} */

.org-tree-node-children .org-tree-node-label .org-tree-node-label-inner {
    width: auto;
    background: #0288d1;
    color: #fff;
    padding: 0 !important;
    font-size: 14px;
    font-weight: 500;
}



.secondName {
    padding: 4px 8px;
    border-radius: 3px;
}

.otherName {
    cursor: pointer;
    padding: 2px 1px;
    border-radius: 3px;
    border: 1px solid #1d4eff;
    animation: blink-and-change-color 2s infinite linear;
    font-weight: bold;
}

.tree-sh .otherName {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 4px;
    padding: 2px 4px;
}

.tree-sh .firstName {
    width: 150px;
    writing-mode: revert;
}

.tree-text {
    margin-top: 5px;
}

.lastName {
    padding: 2px 5px;
}

.firstName:hover,
.otherName:hover {
    background: rgb(55, 55, 241)
}

.otherNameNoNum {
    background: #999;
    color: #fff;
    animation: blink-and-change-color1 2s infinite linear;
}

.otherNameNoNum:hover {
    background: #777;
}

.treeNum {
    font-weight: bold;
    color: #00ffea;
}

.firstName {
    padding: 8px;
    width: 150px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid #1d4eff;
    animation: blink-and-change-color 2s infinite linear;
    display: flex;
    justify-content: center;
}

.firstName .treeNum {
    margin-left: 6px;
    font-size: 18px;
}

.treeRedNum {
    font-weight: bold;
    color: #ffdc23;
}

.secondName:hover {
    background: #0288d1;
}

.horizontal .org-tree-node.is-leaf,
.horizontal .org-tree-node.collapsed {
    padding-top: 4px;
    padding-bottom: 4px;
}

.second-tree {
    position: absolute;
}

.horizontal .org-tree-node,
.horizontal .org-tree-node-children {
    padding-left: 40px;
}

.horizontal .org-tree-node:before,
.horizontal .org-tree-node:after {
    width: 39px;
}

.horizontal .org-tree-node-children:before {
    width: 40px;
}

.horizontal .org-tree-node:not(:only-child):after {
    border-top: 1px solid #aaa !important;
}

.horizontal .org-tree-node:not(:first-child):before,
.org-tree-node:not(:last-child):after {
    border-left: 1px solid #aaa !important;
}

.horizontal .org-tree-node-children:before {
    border-top: 1px solid #aaa !important;
}

.org-tree-node:not(:first-child):before,
.org-tree-node:not(:last-child):after {
    border-top: 1px solid #bbb;
}

.org-tree-node:after {
    border-left: 1px solid #bbb;
}

.org-tree-node-children:before {
    border-left: 1px solid #bbb;
}

@keyframes blink-and-change-color {

    /* 动画开始时的状态，文字完全显示，颜色为红色 */
    0% {
        opacity: 1;
        border-color: rgb(238, 238, 67);
    }

    /* 动画进行到50%时的状态，文字完全隐藏，颜色为蓝色 */
    50% {
        opacity: 1;
        border-color: #1d4eff;
    }

    100% {
        opacity: 1;
        border-color: rgb(238, 238, 67);
    }
}

@keyframes blink-and-change-color1 {

    /* 动画开始时的状态，文字完全显示，颜色为红色 */
    0% {
        opacity: 1;
        border-color: #ccc;
    }

    /* 动画进行到50%时的状态，文字完全隐藏，颜色为蓝色 */
    50% {
        opacity: 1;
        border-color: #fcd15c;
    }

    100% {
        opacity: 1;
        border-color: #ccc;
    }
}

.content-text {
    color: #0558c3;
    margin-left: 10px;
    font-size: 19px;
    font-family: 仿宋;
    position: absolute;
    font-weight: bold;
    top: 5px;
    left: 130px;
}

.org-tree-node.is-leaf,
.org-tree-node.collapsed {
    padding-left: 2px;
    padding-right: 2px;
}

.tree-sh .org-tree-node.is-leaf,
.tree-sh .org-tree-node.collapsed {
    padding-left: 5px;
    padding-right: 5px;
}

.haveChildrenTree {
    height: 191px;
}

.haveChildrenTree1 {
    height: 209px;
}

.org-tree-node-children {
    margin-top: -4px;
}
</style>